Прослуховування подій в JavaScript

Вступ до прослуховування подій

Прослуховування подій (Event Listeners) в JavaScript дозволяє вашому коду реагувати на дії користувача, такі як кліки мишею, натискання клавіш, переміщення курсора та багато іншого.

Це один з найважливіших аспектів веб-розробки, оскільки дозволяє створювати інтерактивні та динамічні веб-сайти.

Основи прослуховування подій

Метод addEventListener()

Основним способом додавання обробників подій є метод addEventListener().

                // Додавання обробника події кліку

                const button = document.getElementById('myButton');

                button.addEventListener('click', function() {

                  console.log('Кнопка була натиснута!');

                });

Види подій

Існує багато типів подій, з якими можна працювати:

Події миші: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
Події клавіатури: keydown, keyup, keypress
Події форми: submit, change, focus, blur, input
Події вікна: load, resize, scroll
Інші події: touchstart, touchend, drag, drop

Об'єкт події

Коли відбувається подія, браузер передає об'єкт події до обробника, який містить інформацію про подію.

                const button = document.getElementById('myButton');

                button.addEventListener('click', function(event) {

                  // event - об'єкт події

                  console.log(event.type); // 'click'

                  console.log(event.target); // елемент, на якому відбулася подія

                });

Фази подій: сплив і занурення

Події в DOM мають три фази поширення:

Фаза занурення (Capturing)

Подія поширюється від кореневого елемента до цільового елемента

Цільова фаза (Target)

Подія досягає цільового елемента

Фаза спливу (Bubbling)

Подія поширюється від цільового елемента назад до кореневого

Window (занурення)

↓

Document (занурення)

↓

HTML (занурення)

↓

Body (занурення)

↓

Div (занурення)

↓

Button (ціль)

↑

Div (сплив)

↑

Body (сплив)

↑

HTML (сплив)

↑

Document (сплив)

↑

Window (сплив)

Контроль фаз подій

За замовчуванням обробники подій виконуються на фазі спливу. Але ви можете вказати, на якій фазі виконувати обробник:

                // Обробник на фазі занурення (третій параметр - true)

                element.addEventListener('click', handler, true);

                // Обробник на фазі спливу (третій параметр - false або відсутній)

                element.addEventListener('click', handler, false);

                // або

                element.addEventListener('click', handler);

Приклад фаз подій

                    const outer = document.getElementById('outer');

                    const inner = document.getElementById('inner');

                    const button = document.getElementById('phaseButton');

                    // Обробник на фазі занурення

                    outer.addEventListener('click', function() {

                      console.log('Outer (занурення)');

                    }, true);

                    // Обробник на фазі спливу

                    outer.addEventListener('click', function() {

                      console.log('Outer (сплив)');

                    }, false);

                    inner.addEventListener('click', function() {

                      console.log('Inner (сплив)');

                    });

                    button.addEventListener('click', function() {

                      console.log('Button (ціль)');

                    });

Зовнішній контейнер

Внутрішній контейнер

Відкрийте консоль браузера (F12) та натисніть кнопку, щоб побачити порядок виконання обробників.

Зупинка поширення подій

Ви можете зупинити поширення події за допомогою методів stopPropagation() та stopImmediatePropagation().

                element.addEventListener('click', function(event) {

                  // Зупиняє поширення події до інших елементів

                  event.stopPropagation();

                  // Зупиняє поширення та виконання інших обробників на цьому елементі

                  // event.stopImmediatePropagation();

                });

Приклади прослуховування подій

Приклад 1: Простий клік

                    // HTML: <button id="clickExample">Натисни мене</button>

                    const clickButton = document.getElementById('clickExample');

                    clickButton.addEventListener('click', function() {

                      this.textContent = 'Кнопка натиснута!';

                      this.style.backgroundColor = 'green';

                    });

Приклад 2: Подія наведення миші

                    // HTML: <div id="hoverExample">Наведи на мене</div>

                    const hoverDiv = document.getElementById('hoverExample');

                    hoverDiv.addEventListener('mouseover', function() {

                      this.style.backgroundColor = 'lightblue';

                    });

                    hoverDiv.addEventListener('mouseout', function() {

                      this.style.backgroundColor = 'white';

                    });

Наведи на мене

Приклад 3: Подія введення тексту

                    // HTML: <input type="text" id="inputExample" placeholder="Введи текст">

                    const inputField = document.getElementById('inputExample');

                    const output = document.getElementById('outputExample');

                    inputField.addEventListener('input', function() {

                      output.textContent = this.value;

                    });

Текст:

Тест з прослуховування подій

Перевірте свої знання з прослуховування подій в JavaScript. У вас є 5 хвилин на проходження тесту.

02:03

Питання 1: Який метод використовується для додавання обробника подій?

attachEvent()

addEventListener()

addEvent()

onEvent()

Питання 2: Яка подія відбувається при натисканні кнопки миші?

mouseover

mouseup

mousedown

mousemove

Питання 3: Як видалити обробник події, доданий за допомогою addEventListener()?

removeEvent()

removeEventListener()

detachEvent()

deleteEventListener()

Питання 4: Яка подія відбувається при зміні значення елемента форми?

input

focus

change

blur

Питання 5: Як отримати доступ до елемента, на якому відбулася подія?

event.currentTarget

event.target

event.source

event.element

Питання 6: Яка фаза події відбувається першою?

Фаза занурення (Capturing)

Цільова фаза (Target)

Фаза спливу (Bubbling)

Всі фази відбуваються одночасно

Питання 7: Як зупинити поширення події до інших елементів?

event.preventDefault()

event.stopPropagation()

event.stop()

event.cancelBubble()

Ви набрали 3 з 7 (43%). Спробуйте ще раз!

Задачі для самостійного розв'язання

Спробуйте самостійно вирішити наступні задачі для закріплення знань про прослуховування подій.

Задача 1: Створіть кнопку, яка змінює колір фону сторінки при кожному кліку

Кожен клік повинен генерувати випадковий колір фону.

Задача 2: Створіть форму з двома полями введення та кнопкою

При натисканні кнопки перевіряйте, чи поля не порожні, і виводьте повідомлення про помилку, якщо вони порожні.

Задача 3: Реалізуйте drag & drop функціонал

Створіть елемент, який можна перетягувати по сторінці за допомогою миші.

Задача 4: Створіть таймер зворотного відліку

Додайте поле для введення часу та кнопку запуску. Таймер повинен відображати час, що залишився, та видавати звуковий сигнал після завершення.

Задача 5: Реалізуйте просту гру "Вгадай число"

Програма генерує випадкове число, а користувач намагається його вгадати. Після кожної спроби програма повідомляє, чи загадане число більше чи менше введеного.